<template>
  <view class="page watch-history">
    <uni-navbar 
      title="观看历史" 
      :border="false"
      :fixed="true"
      :height="barHeight"
      :rightWidth="60"
      :leftWidth="60"
      titleStyle="fontSize:18px;"
      bgColor="transparent"
      :placeholder="false"
      :autoBack="true"
    > 
      
    </uni-navbar>

    <scroll-view
      class="page-scroll-vi"
      :style="{paddingTop: headHt}"
      :scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshTrigged"
      :refresher-threshold="100"
      refresher-background="transparent"
      @refresherrefresh="onPulling"
      @scrolltolower="pageScrollBottomEv"
    >
      <view class="con-list">
        <block v-if="historyList.length">
          <view
            v-for="item in historyList"
            :key="item.id"
            class="obj-item flex justify-between"
          >
            <view class="cover-img" :style="{ backgroundImage: 'url(' + item.coverImg +')' }">
              <view class="cover-flag">
                全{{item.total}}集
              </view>
            </view>

            <view class="flex-1">
              <view class="font18 font-b margin-b12">{{ item.name }}</view>
              <view class="cor-grey font14">观看至{{ item.findex }}集</view>
            </view>

            <view class="continue-btn" @click="continueWatch(item)">继续观看</view>
          </view>

          <view class="load-more">
            <u-loadmore :status="status" />
          </view>
        </block>
        <block v-if="!hasMoreData && !historyList.length">
          <view class="no-data">
            <view>{{noDataTxt}}</view>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
</template>
<script>
  import { QueryWatchHistories } from '@/pages/welfare/api/index';
  import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo'
  import { EventBus } from '@/utils/event-bus'
  import { isMpAlipay } from '@/utils/platform';
  import { dateFormat } from '@/utils/util';
  import { staticHost } from '@/setting';


  export default {
    mixins: [ statusBarInfo ],
    data() {
      return {
        staticHost,
        isMpAlipay,
        historyList: [
        ],
        detailId: '',
        hasMoreData: true,
        
        isRefreshTrigged: false,
        status: 'loadmore',
        noDataTxt: '这里空空如也，啥都没有哦~'
      };
    },
    async onLoad(options) {
      this.refreshApplies();
    },
    methods:{
      continueWatch(item) {
        // item.id;
        console.log('item  ', item);
        EventBus.$emit('watchContinue', item)
        this.$navigateBack()
      },
      onPulling() {
        this.isRefreshTrigged = true
        this.refreshApplies();
      },
      pageScrollBottomEv(e) {
        this.loadMore();
      },
      refreshApplies() {
        // 刷新页面数据
        this.fetchListData().then(data => {
          uni.hideLoading()
          var historyList = [];
          
          this.isRefreshTrigged = false
          if (data && data.length) {
            historyList = data || []

            var hasMoreData = true;
            hasMoreData = false
            this.setData({
              status: hasMoreData ? 'loadmore' : 'nomore',
              hasMoreData,
              historyList
            })
          } else {
            this.setData({
              status: 'nomore',
              hasMoreData: false,
              historyList
            })
          }
        }).catch(e => {
          uni.hideLoading()
          this.isRefreshTrigged = false
          uni.stopPullDownRefresh();
        }).finally((e) => {
          this.isRefreshTrigged = false;
          uni.hideLoading();
          uni.stopPullDownRefresh();
        })
      },
      loadMore() {
        if (!this.hasMoreData) {
          return
        }
        this.setData({
          status: 'loading',
        })
        this.fetchListData().then(data => {
          console.log('x333');
          if (data.records.length) {
            var historyList = this.historyList;
            data.records.forEach(per => {
              historyList.push(per)
            })
            var hasMoreData = true
            this.setData({
              status: hasMoreData ? 'loadmore' : 'nomore',
              hasMoreData,
              historyList
            })
          } else {
            this.setData({
              isLoadMore: false,
              status: 'nomore'
            })
          }
        })
      },
      // 获取job列表
      fetchListData() {
        return new Promise((resolve, reject) => {
          let params = {}
          
          QueryWatchHistories(params).then(res => {
            if (res.code == 200 && res.data) {
              let arr = res.data || []
              arr.forEach(per => {
                per.applyTime = dateFormat('YYYY-mm-dd HH:MM', new Date(per.addTime))
              })
              this.pages = res.data.pages || 1;
              resolve(res.data)
            } else {
              reject(res)
            }
          })
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
  .watch-history {
    position: relative;
    width: 100%;
    height: 100%;
    background: #F5F5F5;
  
    .overflow-hidden {
      overflow: hidden;
    }
    .nowrap {
      flex-wrap: nowrap;
    }
    
    .page-scroll-vi {
      position: relative;
      width: 100%;
      padding: 0 32rpx 40rpx;
      overflow-y: auto;
      // background: linear-gradient(180deg,#f50,#F9EEE7);
      height: 100vh;
    }
  
    .con-list {

      .obj-item {
        position: relative;
        background: #fff;
        border-radius:  32rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;

        .margin-b12 {
          margin-bottom: 12rpx;
        }

        .cover-img {
          width: 160rpx;
          height: 224rpx;
          margin-right: 24rpx;
          border-radius: 20rpx;
          position: relative;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: top center;

          .cover-flag {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 94rpx;
            height: 40rpx;
            background: rgba(0,0,0,0.72);
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24rpx;
          }
        }

        .continue-btn {
          position: absolute;
          right: 32rpx;
          bottom: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 178rpx;
          height: 60rpx;
          background: linear-gradient( 79deg, #FF282D 0%, #FF752B 100%);
          border-radius: 48rpx;
          color: #fff;
          font-size: 28rpx;
        }
      }
    }
  }
</style>